<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>EIS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="PB138 Project">
    <meta name="author" content="EIS Team">

    <link href="css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
      body {
        padding-top: 60px;
        padding-bottom: 40px;
      }

      .row {
        margin-bottom:25px;
      }
    </style>

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le fav and touch icons -->
  </head>

  <body>

    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="#">EIS</a>
          <div class="nav-collapse">
            <ul class="nav">
              <li><a href="index.html">Login</a></li>
              <li class="active"><a href="overview.html">Overview</a></li>
              <li><a href="permalink.html" target="_blank">Permalink</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

    <div class="container">

    <ul id="myTab" class="nav nav-pills">
      <li class="active"><a href="#show" data-toggle="tab">Display all</a></li>
      <li><a href="#insert" data-toggle="tab">Insert artwork</a></li>
    </ul>

    <div id="myTabContent" class="tab-content">

      <div class="tab-pane fade in active" id="show">

        <div class="row">
          <div class="span3">
            <img src="img/260x180.gif" />
          </div>
          <div class="span6">
            <h3>Artwork name 1</h3>
            <em>Created on 1st of May 2012</em>
            <p><br>Praesent ornare vestibulum justo, quis hendrerit libero pretium ac. Quisque in ipsum libero, sit amet vulputate purus. Nunc mauris est</p>
            <p><b>Author:</b> Praesent ornare vestibulum justo, quis hendrerit libero pretium ac. Quisque in ipsum libero, sit amet vulputate purus. Nunc mauris est<br><br></p>
            <a class="btn btn-primary" target="_blank" href="permalink.html">Permalink</a> <a class="btn btn-info">Edit</a>
            <a class="btn btn-danger">Remove</a> <a class="btn btn-success">Generate QR Code</a>
          </div>
        </div>

        <hr>

        <div class="row">
          <div class="span3">
            <img src="img/260x180.gif" />
          </div>
          <div class="span6">
            <h3>Artwork name 2</h3>
            <em>Created on 2nd of June 2012</em>
            <p><br>Praesent ornare vestibulum justo, quis hendrerit libero pretium ac. Quisque in ipsum libero, sit amet vulputate purus. Nunc mauris est vestibulum justo, quis hendrerit</p>
                        <p><b>Author:</b> Praesent ornare vestibulum justo, quis hendrerit libero pretium ac. Quisque in ipsum libero, sit amet vulputate purus. Nunc mauris est<br><br></p>
            <a class="btn btn-primary" target="_blank" href="permalink.html">Permalink</a> <a class="btn btn-info">Edit</a>
            <a class="btn btn-danger">Remove</a> <a class="btn btn-success">Generate QR Code</a>
          </div>
        </div>

        <hr>

        <div class="row">
          <div class="span3">
            <img src="img/260x180.gif" />
          </div>
          <div class="span6">
            <h3>Artwork name 3</h3>
            <em>Created on 3rd of July 2012</em>
            <p><br>Praesent ornare vestibulum justo, quis hendrerit libero pretium ac. Quisque in ipsum ornare vestibulum justo, quis hendrerit libero, sit amet vulputate purus. Nunc mauris est vestibulum justo, quis hendrerit</p>
                        <p><b>Author:</b> Praesent ornare vestibulum justo, quis hendrerit libero pretium ac. Quisque in ipsum libero, sit amet vulputate purus. Nunc mauris est<br><br></p>
            <a class="btn btn-primary" target="_blank" href="permalink.html">Permalink</a> <a class="btn btn-info">Edit</a>
            <a class="btn btn-danger">Remove</a> <a class="btn btn-success">Generate QR Code</a>
          </div>
        </div>

      </div>

      <div class="tab-pane fade" id="insert">

        <h3 class="well">Insert artwork form</h3><br>
         
        <form method="post" class="form-horizontal">

          <div class="row">
            <div class="span6">

              <form enctype="multipart/form-data" action="" method="post"></form>

              <fieldset>
                <div class="control-group">
                  <label for="name" class="control-label">Name of the artwork</label>
                  <div class="controls">
                  <input class="span3" id="name" name="name" type="text"/>
                  </div>
                </div>

                <div class="control-group">
                  <label for="author" class="control-label">Author information</label>
                  <div class="controls">
                  <input class="span3" id="author" name="author" type="text"/>
                  </div>
                </div>

                <div class="control-group">
                  <label for="note" class="control-label">Note</label>
                  <div class="controls">
                  <textarea class="input-xlarge" id="note" name="note" rows="4"></textarea>
                  </div>
                </div>

                <div class="control-group">
                  <label for="thumb" class="control-label">Thumbnail</label>
                  <div class="controls">
                  <input id="thumb" name="thumb" type="file">
                  </div>
                </div>

                <div class="form-actions">
                  <button type="submit" class="btn btn-primary">Insert</button>
                </div>
                
              </fieldset>
            </div>
          </div>
      </div>

    </div> <!-- end of my tabbed content -->
      
      <hr>

      <footer>
        <p>&copy; EIS 2012</p>
      </footer>

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
      <script src="js/bootstrap-tab.js"></script>

    </div> <!-- /container -->
  </body>
</html>
